﻿<template>
	<div class="wareHouse-container">
		<el-dialog v-model="isShowDialog" :title="props.title" :width="700" draggable="">
			<el-form :model="editForm" ref="editFormRef" label-width="120px" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="editForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="仓库编号" prop="warehouseNo" :rules="[{ required: true, message: '编号不能为空' }]">
							<el-input v-model="editForm.warehouseNo" placeholder="请输入编号" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="仓库名称" prop="warehouseName" :rules="[{ required: true, message: '名称不能为空' }]">
							<el-input v-model="editForm.warehouseName" placeholder="请输入仓库名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="管理员" prop="manager"> 
							<el-select v-model="editForm.manager" filterable placeholder="请选择管理员">
								<el-option v-for="item in managerList"
									:key="item.account" 
									:label="item.realName" 
									:value="item.account"
								/>
							</el-select>
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="序号" prop="sortId" :rules="[{ required: true, message: '序号不能为空' }]">
							<el-input-number v-model="editForm.sortId"/> 
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态" prop="usable">
							<el-switch v-model="editForm.usable" active-text="可用" inactive-text="禁用" /> 
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="editForm.remark" placeholder="请输入备注" clearable /> 
						</el-form-item>
						
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref,onMounted } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { addWareHouse, updateWareHouse,ListWareHouseUser } from '/@/api-services/api';
	//父级传递来的参数
	var props = defineProps({
		title: {
			type: String,
			default: "",
		},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadData"]);
	const editFormRef = ref();
	const isShowDialog = ref(false);
	const editForm = ref<any>({});
	let managerList=Array<any>([]);
	//自行添加其他规则
	const rules = ref<FormRules>({});

	// 打开弹窗
	const openDialog = (row: any) => {
		editForm.value = JSON.parse(JSON.stringify(row));
		isShowDialog.value = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadData");
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
	};

	// 提交
	const submit = async () => {
		editFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if (isValid) {
				let values = editForm.value;
				if (editForm.value.id != undefined && editForm.value.id > 0) {
					await updateWareHouse(values);
				} else {
					await addWareHouse(values);
				}
				closeDialog();
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
	}; 
	// 页面加载时
	onMounted(async () => {
		ListWareHouseUser().then((res) => { 
			managerList=res.data.result;
		});
	});

	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




